<template>
  <div class="split">
    <ul class="flex gap-2" :class="[`style-${stageConfig.split}`]">
      <li
        v-for="(item, key) in stageConfig.subs"
        :key="key"
        class="justify-center items-center flex relative"
        :class="[{ active: item.alias === currentStage.alias }]"
        @click="selectItem(item)"
      >
        {{ item.alias }}
        <div class="dropdown">
          <a-dropdown>
            <div>
              {{ t["操作"] }}
              <IconDown />
            </div>
            <template #content>
              <div style="width: 84px">
                <a-doption @click="copy(item)">{{ t["复制"] }}</a-doption>
                <a-doption v-if="copyScreen" @click="paste">{{ t["粘贴"] }}</a-doption>
              </div>
            </template>
          </a-dropdown>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { currentStage, stageConfig, updateStage } from "@/views/paint/modules/data/stage";

import { IStage } from "@/interface/IStage";
import { copyScreen } from "@/views/paint/layout/bus";
import { Message } from "@arco-design/web-vue";
import { useCloned } from "@vueuse/core";

const t = translate("公共模块");
const selectItem = (item: IStage) => {
  currentStage.value.subs = [];
  currentStage.value = item;
  updateStage.value += 1;
};

const copy = (item: IStage) => {
  copyScreen.value = useCloned(item.components).cloned.value;
  Message.success("success");
};
const paste = () => {
  if (copyScreen.value) {
    currentStage.value.components = copyScreen.value;
  }
};
</script>

<style lang="scss" scoped>
.split {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  $hh: 84px;

  ul {
    display: grid;
    gap: 12px;
    li {
      width: $hh;
      height: $hh;
      border-radius: 4px;
      background-color: #f8f8f8;

      cursor: pointer;
      text-transform: uppercase;
      &:hover {
        .dropdown {
          opacity: 1;
        }
      }
    }

    .active {
      color: white;
      background: var(--primary);
    }
  }

  .style-1 {
    grid-template-columns: 1fr 1fr;
  }
}

.dropdown {
  background-color: none;
  position: absolute;
  bottom: 0;
  width: 84px;
  text-align: center;
  font-size: 12px;
  line-height: 24px;
  cursor: pointer;
  opacity: 0;
  z-index: 10;
}
</style>
